import {useSelector} from "react-redux";
import {Card, Col, Row, Statistic} from 'antd';
function convert(n){
    if(!window.web || !n) return
    return window.web.web3.utils.fromWei(n, "ether");
}
export default function Balance(){
    const {
        TokenWallet,//钱包KWT余额（wei转换，必须字符串）
        TokenExchange,//交易所KWT余额（wei转换，必须字符串）
        EtherWallet,//钱包以太币余额
        EtherExchange//交易所以太币余额
        } = useSelector((state) => state.balance);

    return (
        <div>
            <Row >
                <Col span={6}>
                    <Card hoverable={true}>
                        <Statistic title="钱包中ETH" value={convert(EtherWallet)} precision={3} valueStyle={{color:"#3f8600"}} />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card hoverable={true}>
                        <Statistic title="钱包中KWT" value={convert(TokenWallet)} precision={3} valueStyle={{color:"#1677ff"}} />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card hoverable={true}>
                        <Statistic title="交易所中的ETH" value={convert(EtherExchange)} precision={3} valueStyle={{color:"#faad14"}} />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card hoverable={true}>
                        <Statistic title="交易所中的KWT" value={convert(TokenExchange)} precision={3} valueStyle={{color:"#cf1332"}} />
                    </Card>
                </Col>
            </Row>
        </div>
    )
}